<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"></meta>
    <title>Book Management</title>
    <!--bootstrap->防止更新js/css包引起其他html冲突，此处为线上部署-->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script type="text/javascript" src="../static/bootstrap/js/bootstrap.min.js" th:src="@{/bootstrap/js/bootstrap.min.js}"></script>
    <link rel="stylesheet" type="text/css" href="../static/bootstrap/css/bootstrap.css" th:href="@{/bootstrap/css/bootstrap.css}"/>
    <!--easyui相关-->
    <link rel="stylesheet" type="text/css" href="../static/easyui/themes/gray/easyui.css" th:href="@{/easyui/themes/gray/easyui.css}"/>
    <link rel="stylesheet" type="text/css" href="../static/easyui/themes/icon.css" th:href="@{/easyui/themes/icon.css}"/>
    <link rel="stylesheet" type="text/css" href="../static/easyui/demo/demo.css" th:href="@{/easyui/demo/demo.css}"/>

    <!--蹭一下别人的css-->
    <link rel="stylesheet" type="text/css" href="../static/css/borrowtable.css" th:href="@{/css/borrowtable.css}">

    <link rel="stylesheet" href="../static/css/iconfont.css" th:href="@{/css/iconfont.css}">
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!--框架引用js-->
    <script type="text/javascript" src="../static/easyui/jquery.min.js" th:src="@{/easyui/jquery.min.js}"></script>
    <script type="text/javascript" src="../static/easyui/jquery.easyui.min.js" th:src="@{/easyui/jquery.easyui.min.js}"></script>
    <!-- 英文化 -->
    <script type="text/javascript" src="../static/easyui/locale/easyui-lang-en.js" th:src="@{/easyui/locale/easyui-lang-en.js}"></script>




    <!--二维码-->
    <script type="text/javascript" src="../static/js/JsBarcode.all.js" th:src="@{/js/JsBarcode.all.js}"></script>
</head>
<body background="../static/images/login.jpg" background-repeat="no-repeat">

<nav class="navbar navbar-dark navbar-fixed-top" role="navigation" style="background-color: black">
    <a class="navbar-brand" style="color: white;font-family: 'Arial Narrow'"><i class="fa fa-cloud fa-lg"></i>Libraby</a>
    <a class="navbar-brand" href="#" th:href="@{/user/login}" style="color: white;font-family: 'Arial Narrow'"><i class="fa fa-user fa-lg"></i>Logout</a>
    <li class="nav-item dropdown">
        <a class="navbar-brand dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="color: white;font-family: 'Arial Narrow'">Reader Management</a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown" style="background-color: black">
            <a class="dropdown-item" href="#" th:href="@{/librarian_Changeinfo_Reader}" style="color: white">Reader Account</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#" th:href="@{/librarian_Changeinfo_Reader}" style="color: white">Pending Account</a>

            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#" th:href="@{/librarian_BR_viewReader}" style="color: white">Borrow Return History</a>
        </div>
    </li>
    <a class="navbar-brand" href="#" th:href="@{/incomerecord}" style="color: white">Income</a>
    <li class="nav-item dropdown">
        <a class="navbar-brand dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="color: white;font-family: 'Arial Narrow'">Public Notice</a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown" style="background-color: black">
            <a class="dropdown-item" href="#" th:href="@{/notice}" style="color: white">Publish_Notice</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#" th:href="@{/notice/update}" style="color: white">Update_Notice</a>
        </div>
    </li>
    <li class="nav-item dropdown">
        <a class="navbar-brand dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="color: white;font-family: 'Arial Narrow'">Pending</a>
        <div class="dropdown-menu dg-dark" aria-labelledby="navbarDropdown" style="background-color: black">
            <a class="dropdown-item" href="#" th:href="@{/borrowmsg}" style="color: white">Borrow</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#" th:href="@{/returnmsg}"  style="color: white">Return</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#" th:href="@{/finemsg}" style="color: white">Fine</a>
        </div>
    </li>
    <a class="navbar-brand" href="#" th:href="@{/librarian_book}" style="color: white">Librarian Home</a>
    <a class="navbar-brand" href="/reader_searchbook(no)"  style="color: white">Home</a>
</nav>

<div class="background" style="overflow:auto;overflow-x:hidden;margin: 0 auto;margin-top:50px;height:600px;width:900px">
    <table id="dg" class="easyui-datagrid" fitColumns="true" pagination="true" style="width:900px;height:500px" url="/librarian_reader_list" align="center" toolbar="#tb">
        <thead>
        <tr>
            <th field="cd" checkbox="true" align="center"></th>
            <th field="phone" width="100" align="center">Phone</th>
            <th field="rname" width="100" align="center">Rname</th>
            <th field="password" width="120" align="center">Password</th>
            <th field="email" width="170" align="center">Email</th>
            <th field="date" width="150" align="center">Date</th>
            <th field="number" width="70" align="center">Number</th>
            <th field="deposit" width="60" align="center">Deposit</th>
            <th field="register" width="100" align="center">Register</th>
        </tr>
        </thead>
    </table>

    <div id="tb">
        <div>
            <a href="javascript:openLinkModifyDialog()" class="easyui-linkbutton" iconCls="icon-edit" plain="true">Edit</a>
            <a href="javascript:deleteLink()" class="easyui-linkbutton" iconCls="icon-remove" plain="true">Delete</a>
        </div>
        <div>
            &nbsp;ReaderName：&nbsp;
            <input type="text" id="s_rname" size="20" onkeydown="if(event.keyCode==13) searchWebSite()"/>
            <a href="javascript:searchWebSite()" class="easyui-linkbutton" iconCls="icon-search" plain="true">Search</a>
        </div>
    </div>

    <div id="dlg" class="easyui-dialog" style="width: 500px;height: 200px;padding: 10px 20px" closed="true"
         buttons="#dlg-buttons">
        <form id="fm" method="post">
            <table cellspacing="8px">
                <tr>
                    <td>Phone：</td>
                    <td>
                        <input type="text" id="phone" name="phone" class="easyui-validatebox" required="true"/>
                    </td>
                </tr>
                <tr>
                    <td>Rname：</td>
                    <td>
                        <input type="text" id="rname" name="rname" class="easyui-validatebox" required="true"/>
                    </td>
                </tr>
                <tr>
                    <td>Password：</td>
                    <td>
                        <input type="text" id="password" name="password" class="easyui-validatebox" required="true"/>
                    </td>
                </tr>
                <tr>
                    <td>Email：</td>
                    <td>
                        <input type="text" id="email" name="email" class="easyui-validatebox" required="true"/>
                    </td>
                </tr>
                <tr>
                    <td>Date：</td>
                    <td>
                        <input type="text" id="date" name="date" class="easyui-validatebox" required="true"/>
                    </td>
                </tr>
                <tr>
                    <td>Number：</td>
                    <td>
                        <input type="text" id="number" name="number" class="easyui-validatebox" required="true"/>
                    </td>
                </tr>
                <tr>
                    <td>Deposit：</td>
                    <td>
                        <input type="text" id="deposit" name="deposit" class="easyui-validatebox" required="true"/>
                    </td>
                </tr>
                <tr>
                    <td>Register：</td>
                    <td>
                        <input type="text" id="register" name="register" class="easyui-validatebox" required="true"/>
                    </td>
                </tr>
            </table>
        </form>
    </div>

    <div id="dlg-buttons">
        <a href="javascript:saveLink()" class="easyui-linkbutton" iconCls="icon-ok">Save</a>
        <a href="javascript:closeLinkDialog()" class="easyui-linkbutton" iconCls="icon-cancel">Close</a>
    </div>

    <div class="footer">
        <div>
            <a class="navbar-brand" style="color: white;font-size: 30px;font-family: 'Book Antiqua';
            margin-top:1%;margin-left: 10% "><i class="fa fa-cloud fa-lg"></i>Libraby</a>
            <a class="navbar-brand" style="color: white;font-size: 30px;font-family: 'Book Antiqua';
            margin-top:1%;margin-left: 10% ">Shan ICP Number 18018134 | Powered by 1713011</a>
        </div>
    </div>

    <script th:line="javascript">
        var url;


        /* 2、修改 */
        function openLinkModifyDialog() {
            var selectedRows = $("#dg").datagrid("getSelections");
            if(selectedRows.length != 1) {
                $.messager.alert("Alert", "please choose a one data you want to edit！");
                return;
            }
            var row = selectedRows[0];
            /*EasyUI 回显信息*/
            $("#fm").form("load", row);
            $("#dlg").dialog("open").dialog("setTitle", "edit reader information");
            url = "/librarian_reader_save?id=" + row.id;
        }

        /* 3、删除 */
        function deleteLink() {
            var selectedRows = $("#dg").datagrid("getSelections");
            if(selectedRows.length == 0) {
                $.messager.alert("Alert", "please choose one data you want to delete！");
                return;
            }
            var strIds = [];

            /*SpringBoot 小于号要求*/
            for(var i = 0; i < selectedRows.length; i++) {
                strIds.push(selectedRows[i].phone);
            }
            /* 转化 "1,2,3" 这种格式  */
            var ids = strIds.join(",");
            $.messager.confirm("Alert", "Are you sure to delete <font color='red'>" + selectedRows.length + "</font>data？", function(r) {
                if(r) {
                    $.post("/librarian_reader_delete", {
                        ids: ids
                    }, function(result) {
                        /* 后台传来一个true */
                        if(result.success) {
                            $.messager.alert("Alert", "delete success！");
                            /*数据变动，需要重新加载数据，作用类似刷新网页*/
                            $("#dg").datagrid("reload");
                        } else {
                            $.messager.alert("Alert", "delete fail！");
                        }
                    }, "json");
                }
            });
        }

        /* save 保存操作，位于 add、edit 中 */
        function saveLink() {
            $("#fm").form("submit", {
                url: url,
                onSubmit: function() {
                    /*前端验证，再次使用EasyUI 提供的校验 class*/
                    return $(this).form("validate");
                },
                success: function(result) {
                    var result = eval('(' + result + ')');
                    /* 后台传来一个true */
                    if(result.success) {
                        $.messager.alert("Alert", "save success！");
                        resetValue();
                        $("#dlg").dialog("close");
                        /*数据变动，需要重新加载数据，作用类似刷新网页*/
                        $("#dg").datagrid("reload");
                    }
                    else{
                        $.messager.alert("Alert", "save fail！");
                    }
                }
            });
        }

        /* 清空表单数据 */
        function resetValue() {
            $("#phone").val("");
            $("#rname").val("");
            $("#password").val("");
            $("#email").val("");
            $("#date").val("");
            $("#number").val("");
            $("#deposit").val("");
            $("#register").val("");
        }

        /* 关闭对话框 */
        function closeLinkDialog() {
            resetValue();
            $("#dlg").dialog("close");
        }
        /* 4、增加搜索 */
        function searchWebSite() {
            $("#dg").datagrid("load", {
                rname : $("#s_rname").val()
            });
        }

        //二维码添加标识
        function show_barcode(value,row,index) {
            if(value!=null&&value!=""&&value!='undenfine'){
                var oi='output'+index;
                return "<img id='"+oi+"'/>";
            }
        }

        function getbarcode(index,content){
            var trs=$("#output"+index).JsBarcode(content,{
                height: 40
            });
        }

        <!--待修改-->
        $(function () {
            $('#dg').datagrid({
                onLoadSuccess:function(data){
                    var rows=$('#dg').datagrid('getRows');
                    for(var i=0;i<rows.length;i++){
                        var temp=rows[i]['id'];
                        getbarcode(i,temp);
                    }
                }
            });
        });

    </script>
</body>
</html>